<!DOCTYPE html>
<html>
<head>
    <title>黑马顺风车</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css">
    <script src="../js/jquery-1.11.3.min.js"></script>
    <script src="../js/jquery.mobile-1.4.5.min.js"></script>
    <link rel="stylesheet" href="../css/common.css" />
    <script type="text/javascript" src="../js/common.js"></script>

    <script>
        
        function getStatusColor(status){
            switch (status){
                case 2 : return 'green'; break;
                case 1 : return 'red'; break;
            }
        }
        $.ajax({
            type : "POST",
            url  : "/order/api/list",
            cache : false,
            data : JSON.stringify({role:localStorage.getItem('current_role')}),
            success : function(d){
                for(var i in d.data){
                    var dd = d.data[i];
                    dd.statusName = orderStatus[dd.status];
                    dd.statusColor = getStatusColor(dd.status);
                    dd.time = transDate(dd.passengerStartDate);
                    renderByTemplate('#defaultpanel','#template',dd);
                    if (dd.status != 1) { //已支付，去掉支付连接
                        $('#defaultpanel p:last').find('a').eq(0).remove();
                    }
                }
            },
            error : function(){
                
            }
        });

        function confirmPay(orderId){

            $.ajax({
                type : "POST",
                url  : "/payment/api/confirmPay/"+orderId,
                cache : false,
                success : function(d){
                    console.log(d);
                    if(d.code == 200){
                        showMsg(d.data[0]);
                        toUrl('order.html',1000);
                    }
                },
                error : function(){

                }
            });

        }

        $(function(){
            
        });


    </script>
</head>
<body>
<div id="template" style="display: none;">
    <div data-role="content" class="ui-content ui-content2 trip-content" id="{id}" status="{status}">
        <h4 style="color:darkgoldenrod">
            出行时间：{time}
            <span style="color:{statusColor}"> &nbsp;&nbsp;{statusName}</span>
        </h4>
        <p>
            乘客姓名：<span>{passengerUseralias}</span>
            <!-- <br>
            联系方式：<span>{passengerPhone}</span> -->
            <br>
            出发地：<span>{passengerStartAddr}</span>
            <br>
            目的地：<span>{passengerEndAddr}</span>
        </p>
        <p style="color:darkgoldenrod">订单金额：{cost}</p>
        <p style="text-align:right;">
            <a data-ajax="false" href="javascript:confirmPay('{id}')" style="text-decoration:none">到款确认</a> &nbsp;
            <a data-ajax="false" href="../message.html?t={passengerStrokeId}" style="text-decoration:none">联系ta&gt;&gt;</a>
        </p>
    </div>
</div>

<div data-role="page" id="pageone" class="bg-img">
    <div data-role="header" data-position="fixed" data-tap-toggle="false">
        <a href="javascript:changeRole()" class="ui-btn ui-btn-inline ui-corner-all">切换</a>
        <h1>司机端 - 我的订单</h1>
    </div>
    <div style="margin-top:120px;" id="trips"></div>

    <div id="defaultpanel">
    </div>

    <div style="margin-bottom:20px;"></div>
    <div data-role="footer" data-position="fixed" data-tap-toggle="false">
        <div data-role="navbar" style="margin: 0;">
            <ul>
                <li><a href="javascript:location.href='user.html'" data-icon="home">首页</a></li>
                <li><a href="javascript:location.href='trip.html'" data-icon="grid">我的行程</a></li>
                <li><a href="javascript:location.href='order.html'" data-icon="bullets" class="ui-btn-active">我的订单</a></li>
                <li><a href="javascript:location.href='../common/userCenter.html'" data-icon="user">个人中心</a></li>
            </ul>
        </div>
    </div>
</div>

</body>
</html>